import React from 'react'
import { Form, Input, Button, message } from 'antd';
import styles from "./login.less"
import { login } from "../http/management"
import { history } from "umi"

export default function index() {
    const [form] = Form.useForm();
    const onFinish = async (values) => {
        const res = await login(values)
        if (res.code == 200) {
            localStorage.setItem('token', res.token)
            localStorage.setItem('username', values.account)
            form.resetFields();
            message.success("登录成功"),  
            history.push('/home')

        }else{
            message.error('用户名或密码错误')
        }
    };


    return (
        <div >
            <div className={styles.all}>
                <h1>食谱后台管理系统</h1>
                <div className={styles.card}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        form={form}
                        onFinish={onFinish}

                    >
                        <Form.Item
                            label="用户名"
                            name="account"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的用户名!',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入您的密码!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 10,
                                span: 10,
                            }}
                        >
                            <Button type="primary" htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>

            </div>

        </div>
    )
}

